<template>
	<u-popup :show="show" mode="center" :round="20" :safeAreaInsetBottom="false">
		<view class="contf">
			<view class="tits">服务条款和隐私政策提示</view>
			<view class="popup-txt">
				感谢您使用本小程序，在使用前您应当阅读井同意
				<text class="blue-color" @click="handleOpenPrivacyContract">{{privacyContractName}}</text>
				，当点击同意并继续时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力；如您不同意，将无法继续使用小程序相关功能。
			</view>
			<view class="btn-all">
				<button id="disagree-btn" type="default" @click="handleDisagree">不同意</button>
				<button id="agree-btn" type="primary" open-type="agreePrivacyAuthorization"
					@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				privacyContractName: "" //协议名称
			}
		},
		mounted() {
			this.checkPrivacy()
		},
		methods: {
			handleAgreePrivacyAuthorization(res) {
				// 用户同意隐私协议事件回调
				// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
				this.show = false
				//通知父组件
				this.$emit("agreePrivacy")
			},
			handleDisagree() {
				this.show = false
			},
			handleOpenPrivacyContract() {
				// 打开隐私协议页面
				uni.openPrivacyContract({
					success: () => {}, // 打开成功
					fail: () => {}, // 打开失败
					complete: (res) => {
						console.log(res, "openPrivacyContract complete");
					}
				})
			},
			// 判断是否授权协议
			checkPrivacy() {
				return new Promise((resolve,reject) => {
					uni.getPrivacySetting({
						success: res => {
							this.privacyContractName = res.privacyContractName;
							if (res.needAuthorization) {
								this.show = true
							} else {
								resolve(res)
							}
						},
						fail: (err) => {
							reject(err)
						}
					})
				})
			},
			openPop() {
				this.show = true
			}
		}
	}
</script>

<style scoped lang="scss">
.blue-color {
	color: rgba(39, 152, 240, 1);
}
.popup-txt {
	line-height: 48upx;
	font-size: 28upx;
}
.contf {
	width: 70vw;
	overflow: hidden;
	border-radius: 20upx;
	box-sizing: border-box;
	padding: 44upx 40upx;
	background-color: #fff;
	>.btn-all {
		display: flex;
		align-items: center;
		margin-top: 35upx;
		justify-content: space-between;
		>button {
			width: 47%;
			height: 80upx;
			display: flex;
			align-items: center;
			background-color: #023F92;
			border: 0;
			justify-content: center;
			font-size: 28upx;
			color: #FFFFFF;
			border-radius: 50upx;
		}
		>button:nth-of-type(1) {
			background-color: #EDEDED !important;
			color: #8F8F8F !important;
		}
	}
	>.tits {
		font-size: 32upx;
		color: #000000;
		margin-bottom: 40upx;
		font-weight: 600;
	}
	.scrolsd {
		max-height: 650upx;
		min-height: 300upx;
		font-size: 28upx;
		overflow-y: scroll;
	}
}
</style>